<template>
  <el-dialog :title="title" :width="width"
             :visible.sync="isShowVisible"
             center :close-on-click-modal="false"
             :before-close="() => $emit('close')">
    <el-card v-loading="isLoading">
      <el-form label-width="105px" :model="formData" ref="formData" :rules="rules">
        <el-form-item label="请假类型:" prop="type" id="type">
          <el-select v-model="formData.type" placeholder="请选择">
            <el-option
              v-for="item in leaveTypeList"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间:" prop="starttime" id="starttime">
          <el-date-picker
            v-model="formData.starttime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间:" prop="endtime" id="endtime">
          <el-date-picker
            v-model="formData.endtime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="时长:" prop="whenlong" id="whenlong">
          <el-input v-model="formData.whenlong"></el-input>
        </el-form-item>
        <el-form-item label="事由:">
          <el-input type="textarea" :autosize="{minRows: 4}" placeholder="请输入内容" v-model="formData.reason"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveFormData">保存</el-button>
      <el-button @click="$emit('close')">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import LeaveApprovalApi from '@/api/applyApproval/LeaveApprovalApi'
  export default {
    name: 'leaveAddEdit',
    props:{
      width:{
        type:String,
        default:'60vw'
      },
      myleaveId:{
        type:String,
      },
    },
    data(){
      return{
        title:'新增请假申请',
        isShowVisible:true,
        isLoading:false,
        rules:{
          type: [{required: true, message: '请选择请假类型', tirgger: 'change'}],
          starttime: [{required: true, message: '请选择开始时间', tirgger: 'change'}],
          endtime: [{required: true, message: '请选择结束时间', tirgger: 'change'}],
          whenlong: [{required: true, message: '请填写时长', tirgger: 'blur'}],
        },
        formData:{},
        leaveTypeList:[],
      }
    },
    created(){
      let http = new  LeaveApprovalApi()
      http.getLeaves({}).then(res => {
        for (let i in res.data){
          this.leaveTypeList.push({value: res.data[i]})
        }
      })
      // if(this.myleaveId){
      //   http.detail({myleaveId:this.myleaveId}).then(res => {
      //     this.formData = res.data
      //   })
      // }
    },
    methods:{
      saveFormData(){
        this.$refs['formData'].validate((valid, object) => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: '请耐心等待.....',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            let http = new LeaveApprovalApi()
            http.startLeave(this.formData).then(res => {
              loading.close()
              if(res.code === 200){
                this.$message.success('保存成功!')
                this.$emit('close')
              }else{
                this.$message.error('保存失败!')
              }
            }).catch(e => {
              loading.close()
            })
          } else {
            let validArr = []
            Object.keys(object).forEach(function (key) {
              validArr.push(key)
            });
            let validVal = "#" + validArr[0];
            document.querySelector(validVal).scrollIntoView(true);
          }
        })
      },
    },
  }
</script>

<style scoped>

</style>
